<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>商品列表首页</title>
    <style>
        ul,
        li {
            list-style: none;
        }
        
        ul {
            display: flex;
            border: 1px solid red;
            justify-content: space-evenly;
            padding: 10px 0;
        }
        
        ul li {
            width: 24%;
            border: 1px solid #ccc;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 10px 0;
            cursor: pointer;
        }
        
        ul li img {
            width: 90%;
        }
        
        ul li p {
            width: 90%;
            margin: 5px;
        }
    </style>
</head>

<body>
    <ul id="goods">
        <!-- <li class="goods1"><img src="../images/g1.jpg">
            <p>姓名：阿联酋美女1号</p>
            <p>价格：20</p>
            <p>年龄：20</p>
        </li> -->
    </ul>
    <script>
        // 所有数据库都是从后台数据库取出来的，假设goodlist就是数据库
        var goodlist = [{
            id: 111,
            url: "./images/g1.jpg",
            name: "阿联酋美女1号",
            price: 1998,
            age: 20,
        }, {
            id: 2,
            url: "./images/g2.jpg",
            name: " 阿联酋美女2号 ",
            price: 2888,
            age: 23,
        }, {
            id: 3,
            url: "./images/g3.jpg",
            name: " 阿联酋美女2号 ",
            price: 3888,
            age: 23,
        }, {
            id: 4,
            url: "./images/g4.jpg",
            name: "阿联酋美女4号",
            price: 4888,
            age: 24,
        }, ];
        // 遍历数组数据然后写在页面中
        goodlist.forEach(function(item, index) {
            // 把id的值添加到li标签idx的值
            goods.innerHTML +=
                '<li idx ="' +
                item.id +
                '"  class=" goods1 "><img src="' +
                item.url +
                '">' +
                "<p> 姓名：" +
                item.name +
                "</p>" +
                "<p>价格:" +
                item.price +
                "</p>" +
                "<p>年龄:" +
                item.age +
                "</P>" +
                "</li>";
        });
        // 点击商品跳转到详情页
        // 先获取元素，
        var list = document.getElementsByTagName("li");
        for (var i = 0; i < list.length; i++) {
            list[i].onclick = function() {
                // 打开详情页网址
                open("详情页.html?id=" + this.getAttribute("idx"));
            };
        }
        // 在绑定点击事件
    </script>
</body>

</html>